// (function () {
function init() {
    createDom()
    btnFn()

}
let curIndex = 0,
    ImgDom = document.querySelector('.warpper ul'),
    printDom = document.querySelector('.print ul'),
    printItem = printDom.children,
    nextDom = document.querySelector('.next'),
    warpperDom = document.querySelector('.container'),
    itemWidth = -(warpperDom.clientWidth),
    perDom = document.querySelector('.per'),
    imgList = '',
    printList = '',
    isPlaying = false,
    urls = [
        './img/Wallpaper1.jpg',
        './img/Wallpaper2.jpg',
        './img/Wallpaper3.jpg',
        './img/Wallpaper4.jpg',
        './img/Wallpaper5.jpg',
    ];



nextDom.addEventListener('click', next)
perDom.addEventListener('click', prev)

function next() {
    let nextIndex = curIndex + 1,
        onend;
    if (nextIndex === ImgDom.children.length - 1) {
        onend = function () {
            ImgDom.style.marginLeft = '0px'
            curIndex = 0
        }
    }
    move(nextIndex, onend)
}





function prev() {
    let nextIndex = curIndex - 1
    if (nextIndex < 0) {
        var maxIndex = ImgDom.children.length - 1
        ImgDom.style.marginLeft = maxIndex * itemWidth + 'px'
        nextIndex = maxIndex - 1
    }
    move(nextIndex)

}

function printIndexStatus(index) {
    curIndex = index
    if (curIndex > urls.length - 1) {
        curIndex = 0
    }
    if (printDom.querySelector('.active')) {
        printDom.querySelector('.active').classList.remove('active')
    }

    printItem[curIndex].classList.add('active')
}

function move(newIndex, onend) {

    if (isPlaying || newIndex == curIndex) {
        return
    }
    isPlaying = true

    var from = parseFloat(ImgDom.style.marginLeft) || 0;
    let to = newIndex * itemWidth;
    createAnimation({
        from,
        to,
        totalMiunt: 500,
        onmove: (num) => {
            ImgDom.style.marginLeft = num + 'px'
        },
        onend: () => {
            isPlaying = false
            onend && onend()
        }
    })
    curIndex = newIndex
    printIndexStatus(newIndex)

}

function btnFn() {
    warpperDom.onmouseenter = function () {
        nextDom.style.display = 'block'
        perDom.style.display = 'block'
        autoStop()
    }
    warpperDom.onmouseleave = function () {
        nextDom.style.display = 'none'
        perDom.style.display = 'none'
        autoStart()
    }
}





function createDom() {

    urls.forEach((item) => {
        imgList += `<li><img src="${item}"/></li>`
        printList += `<li></li>`

    })
    imgList += `<li><img src="${urls[0]}"/></li>`
    ImgDom.innerHTML = imgList
    printDom.innerHTML = printList
    // printDom.children[0].classList.add('active')
    ImgDom.style.width = ImgDom.children.length + '00%'

}





var duration = 2000; // 自动切换的间隔
var timerId;

function autoStart() {
    if (timerId) {
        // 已经有自动切换在进行了
        return;
    }
    timerId = setInterval(next, duration);
}

function autoStop() {
    clearInterval(timerId);
    timerId = null;
}

autoStart(); // 最开始自动切换

init()
for (let i = 0; i < printItem.length; i++) {
    printItem[i].onclick = function () {
        console.log(2);
        move(i)
    }
}

// })()